<template>
  <BasicForm @register="register">
    <template #img>
      <Upload
        listType="picture-card"
        :max-count="1"
        :beforeUpload="uploadImg"
        @remove="removeImg"
        :showUploadList="{ showPreviewIcon: false }"
        accept=".png,.jpg"
      >
        上传图片
      </Upload>
    </template>
  </BasicForm>
</template>

<script lang="ts" setup>
  /**
   * 设备配置详情表单
   * formData<{}>:表单数据
   * **/
  import { BasicForm, useForm } from '/@/components/Form';
  import { schemas } from './addModel.data';
  import { Upload } from 'ant-design-vue';
  import { modalFormStyleSetting } from '/@/settings/thingsBoardDesign';
  // 定义 props
  const emit = defineEmits(['upload', 'delete-img']);
  const [register, { validate, resetFields }] = useForm({
    layout: 'vertical',
    showSubmitButton: true,
    schemas: schemas,
    showActionButtonGroup: false,
    ...modalFormStyleSetting,
  });
  function uploadImg(file: any) {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.addEventListener('load', () => {
      emit('upload', reader.result);
    });

    return false;
  }
  function removeImg() {
    emit('delete-img');
    return true;
  }

  defineExpose({
    validate,
    resetFields,
  });
</script>
